<template>
	<view>
		<view>
			<view id="select">
				<text>抄表月份</text>
				<picker mode="date" fields="month" @change="getstart">
					<view>{{starttime}}</view>
				</picker>——
				<picker mode="date" fields="month" @change="getend">
					<view>{{endtime}}</view>
				</picker>
				<button @click="search">查询</button>
			</view>
		</view>
		<view id="content">
			<view class="item" v-for="(item , index) in dbdata" :key="index" @click="xq(index)">
				<view>
					<text>水表号</text>
					<text>单位名称</text>
					<text>抄表月份</text>
					<text>抄表时间</text>
				</view>
				<view>
					<text>{{item.qy_num}}</text>
					<text>{{item.qy_name}}</text>
					<text>{{item.sb_year}}</text>
					<text>{{item.sb_time}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		ref,
		computed,
		reactive,
		toRefs,
		onMounted
	} from 'vue';
	import http from '../../utils/http.js';
	export default {
		setup() {
			let data = reactive({
				dbdata: [],
				starttime: '',
				endtime: '',
				getstart: (ev) => {
					data.starttime = ev.detail.value
					console.log(ev.detail.value)
				},
				getend: (ev) => {
					data.endtime = ev.detail.value
					console.log(ev.detail.value)
				},
				xq:(index)=>{
					uni.navigateTo({
					  url: '/pages/check/jiluchakan',
					  events: {
					    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
					    acceptDataFromOpenedPage: function(data) {
					      console.log(data)
					    },
					  },
					  success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('acceptDataFromOpenerPage', { data:data.dbdata[index]});
						console.log(data.dbdata[index]);
					  }
					})
					// console.log(data.dbdata[index]);
				},
				search: function() {
					http({
						url: '/wx/getjilu',
						data: {
							starttime: data.starttime,
							endtime: data.endtime
						},
					}).then((res) => {
						console.log(res);
						data.dbdata = res.data.data;
					})
				
				}
			})
			onMounted(() => {
						http({
							url: '/wx/initjilu',
							data: {
								starttime: data.starttime,
								endtime: data.endtime
							},
						}).then((res) => {
							console.log(res);
							data.dbdata = res.data.data;
						})
					})
			return {
				...toRefs(data)
			};
		},
		
	}
</script>

<style>
	#select {
		height: 40rpx;
		line-height: 40rpx;
		padding:40rpx 10rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	#select picker {
		flex: 1;
	}
	#select button {
		background-color: #93d5dc;
		line-height: 40rpx;
		font-size: 10rpx;
		flex:1;
		height: 40rpx;
		border: none;
		margin-right: 10rpx;
	}
	picker view {
		text-align: center;
		flex: 1;
		width: 160rpx;
		height: 20rpx;
		line-height: 20rpx;
		border-radius: 10rpx;
	}

	#select text {
		text-align: center;
		margin-left: 10rpx;
		flex: 1;
	}

	#content {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		border-top: black solid 1rpx;
	}

	.item {
		padding: 10rpx 20rpx;
		vertical-align: middle;
		display: flex;
		flex-direction: row;
		width: 750rpx;
		border-bottom: 1rpx black solid;
	}

	.item view {
		flex-direction: column;
		display: flex;
		flex: 1;
		height: 200rpx;
		width: 370rpx;
	}

	#content view text {
		flex: 1;
	}
</style>
